<template>
  <div class="step-nav">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "stepNav",
  model: {
    prop: "activedIdx",
    event: "actived-change",
  },
  provide() {
    return {
      onStepClick: this.onStepClick,
    };
  },
  props: {
    arrivedIdx: {
      type: Number,
    },
    activedIdx: {
      type: Number,
    },
  },
  data() {
    return {
      activedIdxInner: 0,
      inited: false,
    };
  },
  computed: {
    maxStepIdx() {
      if (this.arrivedIdx !== undefined) {
        return this.arrivedIdx;
      }
      return this.activedIdx;
    },
  },
  watch: {
    activedIdx(val) {
      this.activedIdxInner = val;
    },
  },
  created() {
    this.activedIdxInner = this.activedIdx;
  },
  mounted() {},
  methods: {
    onStepClick(idx) {
      this.$emit("step-click", idx);
      if (idx === this.activedIdxInner) {
        return;
      }
      if (idx <= this.maxStepIdx) {
        this.activedIdxInner = idx;
        this.$emit("actived-change", idx);
      }
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.step-nav {
  // width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #999;
}
</style>
